<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加订单</title>
    {template 'stourtravel/public/public_min_js'}
    {Common::getCss('style.css,style-new.css,base.css,order-manage.css,base_new.css')}
    {Common::getScript("jquery.validate.js,choose.js,jquery.validate.addcheck.js,xmselect/xmselect.js,laydate/laydate.js")}
    <script type="text/javascript" src="/res/js/city/jquery.cityselect.js"></script>
    <script>
        window.CURRENCY_SYMBOL = "{Currency_Tool::symbol()}";
    </script>
    <style>
        .ticket-tourer-list td{
            border: 0px!important;
            border-bottom: 1px solid #e5e5e5!important;
        }
        .ticket-tourer-list select{
            height: 30px!important;
        }
    </style>
</head>
<body>
<table class="content-tab">
    <tr>
        <td width="119px" class="content-lt-td" valign="top">
            {template 'stourtravel/public/leftnav'}
            <!--右侧内容区-->
        </td>
        <td valign="top" class="content-rt-td" style="overflow-y: hidden">

            <form method="post" id="frm" name="frm">

                <div class="order-info-container">
                    <div class="order-info-bar">
                        <strong class="bt-bar">订单信息</strong>
                        <a href="javascript:;" class="fr btn btn-primary radius mt-2 mr-10" onclick="window.location.reload()">刷新</a>
                    </div>
                    <div class="order-info-block">
                        <ul>
                            <li>
                                <strong class="item-hd">预订会员：</strong>
                                <div class="item-bd">
                                    <a href="javascript:;" class="btn btn-primary radius size-S choose-member" title="选择">选择</a>
                                    <a href="javascript:;" class="btn btn-primary radius size-S add-member" title="添加会员">添加会员</a>
                                </div>
                            </li>
                            <li>
                                <strong class="item-hd">产品名称：</strong>
                                <div class="item-bd">
                                    <a href="javascript:;" class="btn btn-primary radius size-S choose-product mt-2" title="选择">选择</a>
                                </div>
                            </li>
                            <li class="select-suit hide">
                                <strong class="item-hd">选择时间：</strong>
                                <div class="item-bd">
                                    <div class="choose-start-date">
                                        <input id="datePicker" type="text" class="date-text" name="use_date" value="{date('Y-m-d')}">
                                        <i class="date-icon"></i>
                                    </div>
                                </div>
                            </li>
                            <li class="select-suit hide">
                                <strong class="item-hd">选择套餐：</strong>
                                <div class="item-bd">
                                    <div id="calendar_price_suit" class="w300 fl mr-10"></div>
                                </div>
                            </li>
                        </ul>
                        <table class="user-info-table mt-5 select-suit hide">
                            <thead>
                                <tr>
                                    <td width="25%">门票名称</td>
                                    <td width="25%">预订数量</td>
                                    <td width="25%">单价</td>
                                    <td width="25%">总计</td>
                                </tr>
                            </thead>
                            <tbody class="ticket-list">

                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 订单信息 -->

                <div class="order-info-container">
                    <div class="order-info-bar"><strong class="bt-bar">联系人信息</strong></div>
                    <div class="order-info-block">
                        <ul>
                            <li id="tourer_list_con">
                                <strong class="item-hd">旅客信息：</strong>
                                <div class="item-bd">
                                    <table class="table table-bg table-bordered table-border">
                                        <thead id="tourer_list_header">
                                            <tr>
                                                <th width="20%" class="pl-5">门票名称</th>
                                                <th width="80%" class="pl-5">旅客信息</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tourer_list">

                                        </tbody>
                                    </table>
                                </div>
                            </li>
                            <li>
                                <strong class="item-hd">联系人姓名：</strong>
                                <div class="item-bd">
                                    <input type="text" class="default-text" name="linkman"/>
                                    <span class="star-note-ico">&#42;</span>
                                </div>
                            </li>
                            <li>
                                <strong class="item-hd">联系人电话：</strong>
                                <div class="item-bd">
                                    <input type="text" class="default-text" name="linktel"/>
                                    <span class="star-note-ico">&#42;</span>
                                </div>
                            </li>
                            <li>
                                <strong class="item-hd">联系人邮箱：</strong>
                                <div class="item-bd">
                                    <input type="text" class="default-text" name="linkemail"/>
                                </div>
                            </li>
                            <li>
                                <strong class="item-hd">预订说明：</strong>
                                <div class="item-bd">
                                    <textarea class="default-textarea" name="remark"></textarea>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 联系人信息 -->

                <div class="order-info-container mb-50">
                    <div class="order-info-bar"><strong class="bt-bar">订单状态</strong></div>
                    <div class="order-info-block">
                        <ul>
                            <li>
                                <strong class="item-hd">订单状态：</strong>
                                <div class="item-bd">
                                    {loop $statusnames $row}
                                    {if $row['status']!=6 && $row['status']!=0}
                                    <label class="radio-label mr-30"><input type="radio" name="status" {if $row['status']==2}checked{/if}
                                        value="{$row['status']}">{$row['name']}</label>
                                    {/if}
                                    {/loop}

                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 支付信息 -->

                <div class="order-amount-bar">
                    <span class="item">原价合计：<strong class="color_f60 org_total_price">&yen;0</strong></span>
                    <span class="item">优惠合计：<strong class="color_f60 privilege_total_price">-&yen;0</strong></span>
                    <span class="item">支付总计：<strong class="color_f60 pay_total_price"><b>&yen;0</b></strong></span>
                    <div class="fr">
                        <a class="btn btn-primary size-L radius ml-5 va-m" id="btn_save" href="javascript:;">保存</a>
                    </div>
                </div>
                <!-- 总计价格 -->
                <input type="hidden" id="member_id" name="member_id" value="0"/>
                <input type="hidden" id="product_id" name="product_id" value="0"/>
            </form>
        </td>
    </tr>
</table>
<div id="calendar" style="display: none"></div>
<script>
    var isSaving = false;
    $(function () {
        var typeid = "{$typeid}";

        laydate.render({
            elem: '#datePicker',
            min: new Date().toLocaleDateString(), // 设置最小日期为当前日期
            trigger: 'click',
            done: function(value, date){
                get_suit_list();
            }
        });

        //选择会员
        $('.choose-member').click(function () {
            CHOOSE.setSome("选择会员", {
                loadCallback: setMember,
                maxHeight: 525,
                width: 800
            }, SITEURL + 'member/dialog_member_list', true);
        })
        $('.add-member').click(function () {
            var url = SITEURL + "member/simple_add/parentkey/member/itemid/1/virtual/0";
            ST.Util.showBox('添加会员', url, 320, 150, function () {
                window.product_store.load()
            });
        })
        $("body").delegate('.delete-member', 'click', function () {
            $('#member_id').val(0);
            $(this).parent().remove();
        })

        //选择产品
        $('.choose-product').click(function () {
            CHOOSE.setSome("选择产品", {
                loadCallback: setProduct,
                maxHeight: 500,
                width: 800
            }, SITEURL + 'comment/dialog_product_list?typeid=' + typeid, true);

        })

        $('body').delegate('.delete-product', 'click', function () {
            $('#product_id').val(0);
            $(this).parent().remove();
        })

        //提交订单
        $('#btn_save').click(function () {
            $('#frm').submit();
        })
        //表单验证

        $("#frm").validate({
            ignore: [],
            focusInvalid: false,
            rules: {
                suitid:
                    {
                        required: true
                    },
                usedate:
                    {
                        required: true
                    },
                linkman:
                    {
                        required: true
                    },
                linktel:
                    {
                        required: true
                    }


            },
            messages: {
                suitid: {
                    required: '请选择套餐'
                },
                usedate:
                    {
                        required: ''
                    },

                linkman:
                    {
                        required: "联系人不能为空"
                    },
                linktel:
                    {
                        required: "联系人手机不能为空"
                    },
                linkemail:
                    {
                        required: "联系人邮箱不能为空"
                    }
            },
            errUserFunc: function (element) {


            },
            submitHandler: function (form) {

                var product_id = $("#product_id").val();
                if (product_id == 0) {
                    ST.Util.showMsg('请选择产品', 5);
                    return false;
                }

                var member_id = $('#member_id').val();
                if (member_id == 0) {
                    ST.Util.showMsg('请选择会员', 5);
                    return false;
                }

                var total_num = $('#field_dingnum').val();
                if (total_num <= 0) {
                    ST.Util.showMsg('预订人数不能为0', 5);
                    return false;
                }

                if (!isSaving) {
                    isSaving = true;
                    $.ajax({
                        type: 'POST',
                        url: SITEURL + 'ferry/admin/order/ajax_save_order',
                        data: $('#frm').serialize(),
                        dataType: 'json',
                        beforeSend: function () {
                            ST.Util.showMsg('保存中', 6, 1000000);
                            $('#btn_save').addClass('disabled')
                        },
                        success: function (data) {

                            if (data.status) {
                                ST.Util.showMsg('订单添加成功', 4);
                                setTimeout(function () {
                                    location.reload();
                                }, 1000)

                            } else {
                                var msg = data.msg ? data.msg : '订单添加失败';
                                ST.Util.showMsg(msg, 5);
                                isSaving = false;
                            }
                        },
                        complete: function () {
                            ST.Util.closeBox();
                            $('#btn_save').removeClass('disabled');
                        }
                    })
                }
            }
        })
    })


    /*计算总价*/
    function get_total_price() {
        var pay_total_price = 0;
        $('.amount-opt-wrap').each(function(){
            var num = $(this).find(".dingnum").val();
            var unit_price = $(this).find("[name='price']").val();
            var total_price = ST.Math.mul(num, unit_price);
            pay_total_price = ST.Math.add(pay_total_price, total_price);
        });

        $('.org_total_price').html(CURRENCY_SYMBOL + pay_total_price);
        $('.privilege_total_price').html(CURRENCY_SYMBOL + 0);
        $('.pay_total_price').html(CURRENCY_SYMBOL + pay_total_price);
    }

    function setMember(result, bool) {
        var html = '<span class="choose-child-item ml-10">' + result.title + '<i class="close-icon delete-member" data-id="' + result.id + '" ></i></span>';
        $("#member_id").val(result.id);
        $(".choose-member").after(html);
        $("#frm").valid();
    }

    function setProduct(result, bool) {
        var html = '<span class="choose-child-item ml-10">' + result.title + '<i class="close-icon delete-product" data-id="' + result.id + '" ></i></span>';
        $("#product_id").val(result.id);
        $(".choose-child-item.ml-10").each(function () {
            if ($(this).find('.delete-member').length == 0) {
                $(".choose-child-item.ml-10").remove();
            }
        });

        $(".choose-product").after(html);
        $("#frm").valid();
        get_suit_list();
    }


    //获取套餐
    function get_suit_list()
    {
        $('.ticket-list').html('');
        $('#tourer_list').html('');
        var product_id = $('#product_id').val();
        var date = $('#datePicker').val();
        $.ajax({
            type: 'POST',
            url: SITEURL + 'ferry/admin/order/ajax_get_suit_list',
            data: {product_id: product_id,date: date},
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    $('.select-suit').removeClass('hide');
                    console.log(data);
                    var radio_type = data.type !== '1';
                    var suitSelect = xmSelect.render({
                        el: '#calendar_price_suit',
                        size: 'mini',
                        tips: '请选择套餐',
                        radio: radio_type,
                        height: '200px',
                        name: 'suit_list',
                        toolbar: {showIcon: false,show: true},
                        prop: {
                            name: 'title',
                            value: 'tag',
                        },
                        filterable: true,
                        theme: {
                            color: '{Common::get_back_color()}',
                        },
                        data: function () {
                            return data.list
                        },
                        on: function (res) {
                            suitSelect.closed();
                            var data = res.arr;
                            if(radio_type){
                                $('#tourer_list').html('');
                            }
                            console.log(data);
                            var html = '';
                            for(var i=0;i<data.length;i++){
                                var row = data[i];
                                html += '<tr>';
                                html += '<td>';
                                html += '<span class="cor_666">'+row.title+'</span>';
                                html += '</td>';
                                html += '<td>';
                                html += '<span class="amount-opt-wrap">';
                                html += '<a href="javascript:;" onclick="number_change(-1,$(this))" class="sub-btn">&ndash;</a>';
                                html += '<input type="text" class="num-text dingnum" name="dingnum['+row.ticket_id+'_'+row.sku_id+']" maxlength="4" value="0" readonly/>';
                                html += '<input type="hidden" name="price" value="'+row.price+'"/>';
                                html += '<input type="hidden" name="sku_id" value="'+row.sku_id+'"/>';
                                html += '<input type="hidden" name="ticket_id" value="'+row.ticket_id+'"/>';
                                html += '<input type="hidden" name="fill_tourer_type" value="'+row.fill_tourer_type+'"/>';
                                html += '<input type="hidden" name="title" value="'+row.title+'"/>';
                                html += '<a href="javascript:;" onclick="number_change(1,$(this))" class="add-btn">&#43;</a>';
                                html += '</span>';
                                html += '<span class="unit">张</span>';
                                html += '</td>';
                                html += '<td>';
                                html += '<span class="c-success adult_price_total_txt">{Currency_Tool::symbol()}'+row.price+'</span>';
                                html += '</td>';
                                html += '<td>';
                                html += '<span class="c-warning total-price-'+row.ticket_id+'-'+row.sku_id+'">{Currency_Tool::symbol()}0</span>';
                                html += '</td>';
                                html += '</tr>';
                            }
                            $('.ticket-list').html(html);
                        }
                    });
                } else {
                    $('#suit_list').html('');
                }
            }
        })
    }

    function number_change(num, obj)
    {
        var ticket_id = obj.siblings('input[name=ticket_id]').val();
        var sku_id = obj.siblings('input[name=sku_id]').val();
        var dingnum = obj.siblings('.dingnum').val();
        dingnum = ST.Math.add(dingnum, num);
        dingnum = dingnum < 1 ? 0 : dingnum;
        obj.siblings('.dingnum').val(dingnum);

        var price = obj.siblings('input[name=price]').val();
        var total = ST.Math.mul(dingnum, price);
        $('.total-price-'+ticket_id+'-'+sku_id).html('{Currency_Tool::symbol()}'+total);

        add_tourer(obj,ticket_id,sku_id,dingnum);
        get_total_price();
    }

    function add_tourer(obj,ticket_id,sku_id,num)
    {
        //tourer_list
        var fill_tourer_type = obj.siblings('input[name=fill_tourer_type]').val();
        var title = obj.siblings('input[name=title]').val();
        console.log(fill_tourer_type);
        if(fill_tourer_type !== '0'){
            var class_anme = 'tourer-info-'+ticket_id+'-'+sku_id;
            if(!$('#tourer_list tr').hasClass(class_anme)){
                var html = '<tr class="'+class_anme+'">';
                html += '<td class="pl-5">'+title+'</td>';
                html += '<td class="pl-5 tourer-container">';
                html += '<table class="ticket-tourer-list">';
                html += '<tbody></tbody>';
                html += '</table>';
                html += '</td>';
                html += '</tr>';

                $('#tourer_list').append(html);
            }
            var len = $('.'+class_anme+' .tourer-container .ticket-tourer-list tr').length;

            //fill_tourer_type为1时  仅需要一名旅客信息
            if(fill_tourer_type === '1' && len >=1 && num > 0){
                return false;
            }

            //旅客信息增减操作
            if(len > num){
                $('.'+class_anme+' .tourer-container .ticket-tourer-list tr').eq(num).remove();
                if(num === 0){
                    $('.'+class_anme).remove();
                }
            }else if(len < num){
                var tourer_html = `<tr>
                    <td>
                        <span class="item-hd">姓名：</span>
                        <div class="item-bd">
                            <input type="text" class="input-text w200" name="t_name[`+ticket_id+`_`+sku_id+`][]">
                        </div>
                    </td>
                    <td>
                        <span class="item-hd">性别：</span>
                        <div class="item-bd">
                            <select class="select w80" name="t_sex[`+ticket_id+`_`+sku_id+`][]">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <span class="item-hd">手机号：</span>
                        <div class="item-bd">
                            <input type="text" class="input-text w200" name="t_mobile[`+ticket_id+`_`+sku_id+`][]">
                        </div>
                    </td>
                    <td>
                        <span class="item-hd">证件类型：</span>
                        <div class="item-bd">
                            <select class="select w100" name="t_cardtype[`+ticket_id+`_`+sku_id+`][]">
                                <option value="身份证">身份证</option>
                                <option value="护照">护照</option>
                                <option value="台胞证">台胞证</option>
                                <option value="港澳通行证">港澳通行证</option>
                                <option value="军官证">军官证</option>
                                <option value="出生日期">出生日期</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <span class="item-hd">证件号码：</span>
                        <div class="item-bd">
                            <input type="text" class="input-text w200" name="t_cardno[`+ticket_id+`_`+sku_id+`][]">
                        </div>
                    </td>
                </tr>`;
                $('.'+class_anme+' .tourer-container .ticket-tourer-list tbody').append(tourer_html);
            }
        }
    }


    function get_calendar(ticket_id,sku_id) {
        var width = 500;
        var height = 430;
        var url = SITEURL + 'ferry/admin/order/dialog_calendar/ticket_id/' + ticket_id + '/sku_id/' + sku_id;
        CHOOSE.setSome("选择预订日期", {loadCallback: get_suit_price, maxHeight: height, width: width}, url, true);
    }

    //获取套餐具体报价
    function get_suit_price(data,bool){
        $('.date-'+data.ticket_id+'-'+data.sku_id).find('input').val(data.day);
    }
</script>
</body>
</html>